import React, { useRef } from "react";
import axios from "axios";
import "./findPassword.css";
import { Button, Form, Input, Card } from "antd";

const FindPassword = () => {
  const phoneNum = useRef("");
  const verificationCode = useRef("");
  const newPassword = useRef("");
  
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const handleSendCode = () => {
    // 发送验证码的逻辑
    console.log("Sending verification code...");
  };

  const handleResetPassword = () => {
    // 重置密码的逻辑
    console.log("Resetting password...");
  };

  return (
    <div className="container">
      <div className="forgot-password-wrapper">
        <Card style={{ marginBottom: 100 }}>
          <div className="header">找 回 密 码</div>
          <Form onFinish={onFinish} form={form}>
            <div className="form-wrapper">
              <Form.Item
                label="手机号"
                name="phoneNum"
                ref={phoneNum}
                rules={[
                  {
                    required: true,
                    message: "手机号不能为空",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="验证码"
                name="verificationCode"
                ref={verificationCode}
                rules={[
                  {
                    required: true,
                    message: "请输入验证码",
                  },
                ]}
              >
                <Input.Group compact>
                  <Input style={{ width: '60%' }} />
                  <Button style={{ width: '40%' }} type="primary" onClick={handleSendCode}>发送验证码</Button>
                </Input.Group>
              </Form.Item>

              <Form.Item
                style={{marginTop:20}}
                label="新密码"
                name="newPassword"
                ref={newPassword}
                rules={[
                  {
                    required: true,
                    message: "请输入新密码",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="确认密码"
                name="newPassword"
                ref={newPassword}
                rules={[
                  {
                    required: true,
                    message: "请确认新密码",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <div className="btn">
                <Button type="primary" onClick={handleResetPassword}>重置密码</Button>
              </div>
            </div>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default FindPassword;
